<template>
  <div id="public1">
    <!--搜索-->
    <div class="search-content">
      <el-input v-model="name" placeholder="请输入用户昵称查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
      <el-input v-model="userName" placeholder="请输入用户名称查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
      <el-input v-model="agentName" placeholder="请输入代理名称查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
      <el-select v-model="changeType" clearable placeholder="请选择金币变动类型"  @change="inquiryList" >
        <el-option
          v-for="item in changeTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        v-model="dateTimeRange"
        type="datetimerange"
        range-separator="至"
        clearable
        value-format="yyyy-MM-dd HH-mm-ss"
        @change="inquiryList"
        :picker-options="pickerOptions"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="用户昵称" prop="member" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.member">{{scope.row.member.name}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名称" prop="member" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.member">{{scope.row.member.userName}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="代理名称" prop="agent" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.agent">{{scope.row.agent.name}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="变动类型" prop="changeType" align="center" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.changeType==='recharge'">用户正常充值</div>
            <div v-if="scope.row.changeType==='adminRecharge'">后台充值</div>
            <div v-if="scope.row.changeType==='adminSubtract'">后台减少金币</div>
            <div v-if="scope.row.changeType==='upgradeMember'">升级会员</div>
            <div v-if="scope.row.changeType==='upperWall'">上墙</div>
            <div v-if="scope.row.changeType==='giftGiving'">赠送礼物</div>
            <div v-if="scope.row.changeType==='translation'">购买翻译</div>
          </template>
        </el-table-column>
        <el-table-column label="变动数量" prop="changeNum" align="center" />
        <el-table-column label="变动前" prop="changeBefore"  align="center" />
        <el-table-column label="变动后" prop="changeAfter"  align="center" />
        <el-table-column label="变动时间" prop="createDate" width="170"  align="center" />
        <el-table-column label="备注" width="300" prop="remarks"  align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.remarks.length<20">{{scope.row.remarks}}</span>
            <el-tooltip v-else :content="scope.row.remarks" placement="top">
              <span>{{scope.row.remarks.substring(0,19)+"..."}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
    import {Message} from 'element-ui';
  import request from "../../utils/request";
    export default {
        name: "goldChangeRecord",
      data(){
        return{
          // 查询
          name:"",
          userName:'',
          agentName:'',
          changeType:null,
          changeTypeList:[
            {
              value:0,
              label:'用户正常充值'
            },
            {
              value:1,
              label:'后台充值'
            },
            {
              value:2,
              label:'后台减少金币'
            },
            {
              value:3,
              label:'升级会员'
            },
            {
              value:4,
              label:'上墙'
            },
            {
              value:5,
              label:'赠送礼物'
            },
            {
              value:6,
              label:'购买翻译'
            }
          ],
          dateTimeRange:[],
          pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 0, 0, 0);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                            let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '前天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24* 2);
                            let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                            let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '本月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上月',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
                            let start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
                            let end = new Date(new Date().getFullYear(), new Date().getMonth(), 1, 23, 59, 59);
                            end.setTime(end.getTime() - 3600 * 24 * 1000);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
          isClearable:true,
          // 列表数据
          tableData:[],
          //分页
          currentPage: 1,
          pageSize:10,
          total: 0
        }
      },
      mounted() {
        this.inquiryList();
      },
      methods:{
        isNotNull(value){
          return value !== null && value !== undefined && value !== "";
        },
        //查询列表
        inquiryList(){
          let that=this;
          that.tableData=[];
          let data={
            pageNumber:that.currentPage,
            pageSize:that.pageSize,
            filters:[]
          };
          if(that.isNotNull(that.name)){ //用户昵称
            data.filters.push({
              property:"m.name",
              value:that.name,
              operator: "like"
            })
          }
          if(that.isNotNull(that.userName)){ //用户名称
            data.filters.push({
              property:"m.user_name",
              value:that.userName,
              operator: "eq"
            })
          }
          if(that.isNotNull(that.agentName)){ //代理名
            data.filters.push({
              property:"a.name",
              value:that.agentName,
              operator: "like"
            })
          }
          if(that.isNotNull(that.changeType)){ //金币变动类型
            data.filters.push({
              property:"gcr.change_type",
              value:that.changeType,
              operator: "eq"
            })
          }
          if(this.isNotNull(that.dateTimeRange)){ //变动时间
            data.filters.push({
              property:"gcr.create_date",
              value:that.dateTimeRange[0],
              operator: "ge"
            });
            data.filters.push({
              property:"gcr.create_date",
              value:that.dateTimeRange[1],
              operator: "le"
            })
          }
          request({
            method: 'post',
            url: 'admin/goldChangeRecord/list',
            headers:{
              'Content-Type': 'application/json;charset=UTF-8'
            },
            data:data
          }).then(function (res) {
            if(res.code===200){
              that.total=res.data.total;
              let arr=res.data.records;
              if(arr.length===0){
                that.tableData=[];
              }else{
                that.tableData=arr
              }
            }
          }).catch(function (error) {
            console.log(error);
          });
        },
        // 改变每页显示的数量
        handleSizeChange(val) {
          this.pageSize=val;
          this.inquiryList();
        },
        //改变当前页
        handleCurrentChange(val) {
          this.currentPage=val;
          this.inquiryList();
        }
      }
    }
</script>

<style src="../../assets/css/publicCss/publicStyle.css">

</style>
